<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script>
import BpmnViewer from "bpmn-js/lib/Viewer";
import request from "@/utils/request";

export default {
  name: "work-flow-view",
  mounted() {
    this.init();
  },
  data() {
    return {
      bpmnViewer: null,
      container: null,
      canvas: null
    };
  },
  methods: {
    init() {
      const canvas = this.$refs.canvas;
      this.bpmnViewer = new BpmnViewer({
        container: canvas
      });

      return request({
        url: '/processDefinition/getDefinitionXML',
        method: 'get',
        params: {deploymentId: '5a735eff-5b0f-11ec-b93c-0250f2000002', resourceName: 'CreateWithBPMNJS.bpmn'}
      }).then(result => {
        this.createNewDiagram(result);
      })

    },
    async createNewDiagram(xmlStr) {
      try {
        const result = await this.bpmnViewer.importXML(xmlStr);
        const {warnings} = result;
        console.log(warnings);
      } catch (err) {
        console.log(err.message, err.warnings);
      }
    }
  }
};
</script>
<style scoped>
.containers {
  width: 100%;
  height: calc(100vh - 82px);
}
.canvas {
  width: 100%;
  height: 100%;
}
</style>
